<script setup>
import { ref, onMounted } from "vue";
// 导入图片资源
import addressPlaceImg from './assets/addressPlace.png';
import locationImg from './assets/addressPlace1.png';

// 提示文本状态变量
const infoTextType = ref("addPoint"); // 空字符串表示不显示提示

// 存储所有点位
const points = ref([]);
// 当前拖拽的点位索引
let draggingPointIndex = -1;
// 拖拽的偏移量
let offsetX = 0;
let offsetY = 0;
// 右键菜单状态
const contextMenu = ref({
  show: false,
  x: 0,
  y: 0,
  pointIndex: -1,
});

// 编辑名称弹窗状态
const editNameModal = ref({
  show: false,
  x: 0,
  y: 0,
  pointIndex: -1,
  name: "",
});

// 当前鼠标悬停的点位索引
let hoveredPointIndex = -1;

// 创建点位数组，包含普通点位和图片点位
const availablePoints = ref([
  // 普通颜色点位
  { id: 101, name: "行政楼", color: "#FF6B6B" },
  { id: 102, name: "教学楼A", color: "#4ECDC4" },
  { id: 103, name: "教学楼B", color: "#45B7D1" },
  { id: 104, name: "图书馆", color: "#96CEB4" },
  { id: 105, name: "食堂", color: "#FFEAA7" },
  { id: 106, name: "宿舍A", color: "#DDA0DD" },
  { id: 107, name: "宿舍B", color: "#98D8C8" },
  { id: 108, name: "体育馆", color: "#FF6348" },
  { id: 109, name: "实验楼", color: "#4682B4" },
  { id: 110, name: "科研中心", color: "#32CD32" },
    // 图片类型点位
    { id: 201, name: "图片点位1", color: "#FF6B6B", isImage: true, imagePath: addressPlaceImg },
    { id: 202, name: "图片点位2", color: "#45B7D1", isImage: true, imagePath: locationImg },
]);

// 编辑可用点位名称弹窗状态
const editAvailablePointModal = ref({
  show: false,
  x: 0,
  y: 0,
  pointIndex: -1,
  name: "",
});

// 可用点位右键菜单状态
const availablePointContextMenu = ref({
  show: false,
  x: 0,
  y: 0,
  pointIndex: -1,
});

// 当前正在拖拽的可用点位索引
let draggingAvailablePointIndex = -1;

// 编辑模式状态 - 控制是否允许编辑点位
const isEditMode = ref(true); // 默认为编辑模式
const showEditButton = ref(false); // 编辑按钮显示状态

// 生成随机颜色
const getRandomColor = () => {
  const colors = [
    "#FF6B6B",
    "#4ECDC4",
    "#45B7D1",
    "#96CEB4",
    "#FFEAA7",
    "#DDA0DD",
    "#98D8C8",
  ];
  return colors[Math.floor(Math.random() * colors.length)];
};

// 保存点位信息
const savePoints = () => {
  // 检查是否有点位信息
  if (points.value.length === 0) {
    // 显示提示信息
    alert("当前画布上没有点位信息，请先添加点位后再保存");
    return;
  }

  // 打印当前点位信息
  console.log("当前点位信息:", points.value);

  // 禁用编辑模式
  isEditMode.value = false;

  // 显示编辑按钮
  showEditButton.value = true;

  // 更新提示信息
  infoTextType.value = "savedPoints";
};

// 编辑点位
const editPoints = () => {
  // 启用编辑模式
  isEditMode.value = true;

  // 隐藏编辑按钮
  showEditButton.value = false;

  // 更新提示信息
  infoTextType.value = "addPoint";
};

// 重新渲染点位
// 创建图片缓存对象
const imageCache = {};

const rerenderCanvas = () => {
  // 检查是否有点位信息
  if (points.value.length === 0) {
    // 显示提示信息
    alert("当前没有点位信息可供重新渲染");
    return;
  }

  console.log("重新渲染点位信息:", points.value);

  // 重新绘制canvas
  drawCanvas();

  // 显示重新渲染成功的提示
  infoTextType.value = "renderedPoints";
  // 3秒后清除提示
  setTimeout(() => {
    infoTextType.value =
      infoTextType.value === "renderedPoints" ? "" : infoTextType.value;
  }, 3000);
};

// 处理拖拽开始事件
const handleDragStart = (e, point, index) => {
  // 只有在编辑模式下才允许拖拽
  if (!isEditMode.value) {
    e.preventDefault();
    return;
  }

  // 记录正在拖拽的可用点位索引
  draggingAvailablePointIndex = index;
  // 将点位信息转换为JSON字符串存储在拖拽数据中
  e.dataTransfer.setData("text/plain", JSON.stringify(point));
};

// 处理拖拽悬停事件
const handleDragOver = (e) => {
  // 只有在编辑模式下才允许放置
  if (!isEditMode.value) {
    return;
  }

  console.log("鼠标拖拽点位到canvas，悬停事件");
  // 阻止默认行为，允许放置
  e.preventDefault();
};

// 处理放置事件
const handleDrop = (e) => {
  // 只有在编辑模式下才允许放置
  if (!isEditMode.value) {
    return;
  }

  e.preventDefault();
  console.log("鼠标拖拽点位到canvas，松开鼠标按钮放下点位事件");

  // 获取canvas元素
  const canvas = document.getElementById("myCanvas");
  const rect = canvas.getBoundingClientRect();
  // 计算相对于canvas的坐标
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  // 获取拖拽的点位数据
  const pointDataJson = e.dataTransfer.getData("text/plain");
  let pointData;

  try {
    pointData = JSON.parse(pointDataJson);
  } catch (error) {
    // 如果解析失败，使用默认值
    pointData = {
      id: Math.floor(Math.random() * 900) + 100,
      name: "",
      color: getRandomColor(),
    };
  }

  // 生成100-999之间的随机三位数字作为id（确保唯一性）
  const generateThreeDigitId = () => {
    return Math.floor(Math.random() * 900) + 100;
  };

  // 创建新点位
  const newPoint = {
    id: generateThreeDigitId(), // 使用新生成的id确保唯一性
    originalId: pointData.id, // 保留原始点位的id用于标识
    x: x - 12.5, // 调整位置使中心点在鼠标位置
    y: y - 12.5,
    width: pointData.isImage ? 40 : 25,
    height: pointData.isImage ? 40 : 25,
    color: pointData.color || getRandomColor(),
    name: pointData.name || "", // 使用拖拽点位的名称
    isImage: pointData.isImage || false, // 保留是否为图片点位的属性
    imagePath: pointData.isImage ? pointData.imagePath : null, // 保留图片路径
  };

  // 添加新点位到画布
  points.value.push(newPoint);

  // 从可用点位列表中移除已拖拽的点位
  if (
    draggingAvailablePointIndex !== -1 &&
    draggingAvailablePointIndex < availablePoints.value.length
  ) {
    availablePoints.value.splice(draggingAvailablePointIndex, 1);
    draggingAvailablePointIndex = -1; // 重置拖拽索引
  }

  // 重新绘制canvas
  drawCanvas();

  // 显示添加点位的提示信息
  infoTextType.value = "addPoint";
};

// 删除点位
const deletePoint = () => {
  // 只有在编辑模式下才允许删除
  if (!isEditMode.value) {
    return;
  }

  if (contextMenu.value.pointIndex !== -1) {
    const deletedPoint = points.value[contextMenu.value.pointIndex];

    // 将删除的点位添加回可用点位列表
    const pointToRestore = {
      id: deletedPoint.originalId || deletedPoint.id,
      name: deletedPoint.name,
      color: deletedPoint.color,
    };
    
    // 如果是图片点位，保留图片相关属性
    if (deletedPoint.isImage) {
      pointToRestore.isImage = true;
      pointToRestore.imagePath = deletedPoint.imagePath;
    }
    
    availablePoints.value.push(pointToRestore);

    // 从数组中移除点位
    points.value.splice(contextMenu.value.pointIndex, 1);
    // 重新绘制canvas
    drawCanvas();
  }
  // 关闭菜单
  contextMenu.value.show = false;
};

// 清空点位
const clearPoints = () => {
  if (confirm("确定要清空所有点位吗？")) {
    // 将画布上的所有点位添加回可用点位列表
        points.value.forEach((point) => {
          const pointToRestore = {
            id: point.originalId || point.id,
            name: point.name,
            color: point.color,
          };
          
          // 如果是图片点位，保留图片相关属性
          if (point.isImage) {
            pointToRestore.isImage = true;
            pointToRestore.imagePath = point.imagePath;
          }
          
          availablePoints.value.push(pointToRestore);
        });

    // 清空画布点位
    points.value = [];

    // 重置拖拽相关状态
    draggingPointIndex = -1;
    draggingAvailablePointIndex = -1;
    offsetX = 0;
    offsetY = 0;
    hoveredPointIndex = -1;

    drawCanvas();
  }
};

// 鼠标按下事件
const handleMouseDown = (e) => {
  // 只有在编辑模式下才允许拖拽点位
  if (!isEditMode.value) {
    return;
  }

  // 如果是左键点击
  if (e.button === 0) {
    const canvas = document.getElementById("myCanvas");
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    // 查找点击位置的点位
    const pointIndex = getPointAtPosition(mouseX, mouseY);

    draggingPointIndex = pointIndex;

    if (draggingPointIndex !== -1) {
      // 计算偏移量
      offsetX = mouseX - points.value[draggingPointIndex].x;
      offsetY = mouseY - points.value[draggingPointIndex].y;
    }
  }
};

// 绘制画布的核心函数
const drawCanvas = () => {
  // 获取canvas元素和绘图上下文
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d"); // 2D绘图上下文

  // 清空整个画布，准备重新绘制
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制辅助线（拖动点位时显示）
  if (draggingPointIndex !== -1) {
    const draggedPoint = points.value[draggingPointIndex];
    const draggedCenterX = draggedPoint.x + draggedPoint.width / 2;
    const draggedCenterY = draggedPoint.y + draggedPoint.height / 2;

    // 绘制水平辅助线
    ctx.beginPath();
    ctx.strokeStyle = "rgba(255, 140, 0, 0.3)";
    ctx.lineWidth = 1;
    ctx.setLineDash([5, 5]);
    ctx.moveTo(0, draggedCenterY);
    ctx.lineTo(canvas.width, draggedCenterY);
    ctx.stroke();
    ctx.closePath();

    // 绘制垂直辅助线
    ctx.beginPath();
    ctx.strokeStyle = "rgba(255, 140, 0, 0.3)";
    ctx.lineWidth = 1;
    ctx.setLineDash([5, 5]);
    ctx.moveTo(draggedCenterX, 0);
    ctx.lineTo(draggedCenterX, canvas.height);
    ctx.stroke();
    ctx.closePath();

    // 重置线条样式
    ctx.setLineDash([]);

    // 检查是否与其他点位在同一水平或垂直线上
    points.value.forEach((point, index) => {
      if (index !== draggingPointIndex) {
        const pointCenterX = point.x + point.width / 2;
        const pointCenterY = point.y + point.height / 2;

        // 同一水平线
        if (Math.abs(pointCenterY - draggedCenterY) < 2) {
          ctx.beginPath();
          ctx.strokeStyle = "rgba(255, 69, 0, 0.8)";
          ctx.lineWidth = 2;
          ctx.setLineDash([3, 2]);
          ctx.moveTo(0, draggedCenterY);
          ctx.lineTo(canvas.width, draggedCenterY);
          ctx.stroke();
          ctx.closePath();

          // 绘制交点指示
          ctx.beginPath();
          ctx.fillStyle = "rgba(255, 69, 0, 0.8)";
          ctx.arc(draggedCenterX, draggedCenterY, 5, 0, 2 * Math.PI);
          ctx.fill();
          ctx.closePath();
        }

        // 同一垂直线
        if (Math.abs(pointCenterX - draggedCenterX) < 2) {
          ctx.beginPath();
          ctx.strokeStyle = "rgba(255, 69, 0, 0.8)";
          ctx.lineWidth = 2;
          ctx.setLineDash([3, 2]);
          ctx.moveTo(draggedCenterX, 0);
          ctx.lineTo(draggedCenterX, canvas.height);
          ctx.stroke();
          ctx.closePath();

          // 绘制交点指示
          ctx.beginPath();
          ctx.fillStyle = "rgba(255, 69, 0, 0.8)";
          ctx.arc(draggedCenterX, draggedCenterY, 5, 0, 2 * Math.PI);
          ctx.fill();
          ctx.closePath();
        }
      }
    });
  }

  // 重置线条样式
  ctx.setLineDash([]);

// 绘制所有点位
  points.value.forEach((point) => {
    if (point.isImage && point.imagePath) {
      // 图片类型点位
      if (imageCache[point.imagePath]) {
        // 如果图片已经加载完成，直接绘制
        ctx.drawImage(imageCache[point.imagePath], point.x, point.y, point.width, point.height);
      } else {
        // 图片未加载，创建图片对象并缓存
        const image = new Image();
        image.onload = function() {
          imageCache[point.imagePath] = image;
          drawCanvas(); // 图片加载完成后重绘画布
        };
        image.onerror = function() {
          // 图片加载失败，添加调试信息
          console.error('图片加载失败:', point.imagePath);
          // 绘制默认矩形
          ctx.fillStyle = point.color;
          ctx.fillRect(point.x, point.y, point.width, point.height);
          ctx.strokeStyle = "#333";
          ctx.lineWidth = 2;
          ctx.strokeRect(point.x, point.y, point.width, point.height);
          // 在矩形上显示错误信息
          ctx.fillStyle = "#fff";
          ctx.font = "10px Arial";
          ctx.textAlign = "center";
          ctx.textBaseline = "middle";
          ctx.fillText("图片错误", centerX, centerY);
        };
        // 直接使用point.imagePath作为图片源，不再进行路径处理
        console.log('尝试加载图片:', point.imagePath);
        image.src = point.imagePath;
        
        // 先绘制一个占位符矩形
        ctx.fillStyle = point.color;
        ctx.fillRect(point.x, point.y, point.width, point.height);
      }
    } else {
      // 普通颜色点位
      // 绘制点位的填充颜色
      ctx.fillStyle = point.color;
      ctx.fillRect(point.x, point.y, point.width, point.height);

      // 绘制点位的黑色边框
      ctx.strokeStyle = "#333";
      ctx.lineWidth = 2;
      ctx.strokeRect(point.x, point.y, point.width, point.height);
    }

    // 注释掉所有点位中心显示ID的代码
    // // 在点位中心显示点位ID（截取最后3位避免过长）
    // ctx.fillStyle = "#fff"; // 白色文字
    // ctx.font = "12px Arial"; // 字体和大小
    // ctx.textAlign = "center"; // 文字居中对齐
    // ctx.textBaseline = "middle"; // 文字垂直居中

    // // 将ID转换为字符串，并截取最后几位显示（避免过长）
    // const idStr = point.id.toString().slice(-3);
    // // 计算点位中心点
    // const centerX = point.x + point.width / 2;
    // const centerY = point.y + point.height / 2;
    // // 在中心点绘制点位ID
    // ctx.fillText(idStr, centerX, centerY);

    // 如果鼠标悬停在该点位上且有点位名称，显示名称
    if (
      hoveredPointIndex !== -1 &&
      points.value[hoveredPointIndex].id === point.id &&
      point.name
    ) {
      // 绘制圆角白色背景
      const nameWidth = ctx.measureText(point.name).width + 8;
      const x = point.x - 5;
      const y = point.y - 25;
      const width = nameWidth;
      const height = 20;
      const radius = 4; // 圆角半径
      
      // 绘制圆角矩形
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.arcTo(x + width, y, x + width, y + height, radius);
      ctx.arcTo(x + width, y + height, x, y + height, radius);
      ctx.arcTo(x, y + height, x, y, radius);
      ctx.arcTo(x, y, x + width, y, radius);
      ctx.closePath();
      ctx.fillStyle = "#fff";
      ctx.fill();
      
      // 添加边框
      ctx.strokeStyle = "#ddd";
      ctx.lineWidth = 1;
      ctx.stroke();
      
      // 绘制黑色文字
      ctx.fillStyle = "#000";
      ctx.font = "12px Arial";
      ctx.textAlign = "left";
      ctx.textBaseline = "middle";
      ctx.fillText(point.name, point.x - 1, point.y - 15);
    }
  });
};

// 查找点击位置的点位索引
const getPointAtPosition = (x, y) => {
  return points.value.findIndex(
    (point) =>
      x >= point.x &&
      x <= point.x + point.width &&
      y >= point.y &&
      y <= point.y + point.height
  );
};

// 鼠标移动事件
const handleMouseMove = (e) => {
  const canvas = document.getElementById("myCanvas");
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;

  // 处理拖拽
  if (draggingPointIndex !== -1) {
    // 更新拖拽点位的位置
    points.value[draggingPointIndex].x = mouseX - offsetX;
    points.value[draggingPointIndex].y = mouseY - offsetY;
    // 重新绘制canvas
    drawCanvas();
  } else {
    // 检测鼠标悬停的点位
    const pointIndex = getPointAtPosition(mouseX, mouseY);
    if (pointIndex !== hoveredPointIndex) {
      hoveredPointIndex = pointIndex;
      drawCanvas();
    }
  }
};

// 鼠标释放事件
const handleMouseUp = () => {
  // 结束拖拽
  draggingPointIndex = -1;
};

// 鼠标离开画布事件
const handleMouseLeave = () => {
  // 结束拖拽和悬停状态
  draggingPointIndex = -1;
  hoveredPointIndex = -1;
  drawCanvas();
};

// 右键菜单事件
const handleContextMenu = (e) => {
  // 只有在编辑模式下才允许右键菜单（编辑、删除）
  if (!isEditMode.value) {
    return;
  }

  e.preventDefault();

  const canvas = document.getElementById("myCanvas");
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  const canvasX = e.clientX - rect.left;
  const canvasY = e.clientY - rect.top;

  // 查找右键点击的点位
  const pointIndex = getPointAtPosition(canvasX, canvasY);

  if (pointIndex !== -1) {
    // 显示右键菜单
    contextMenu.value = {
      show: true,
      x: mouseX,
      y: mouseY,
      pointIndex: pointIndex,
    };
  }
};

// 关闭右键菜单
const closeContextMenu = () => {
  contextMenu.value.show = false;
};

// 编辑可用点位名称
const editAvailablePointName = () => {
  // 关闭右键菜单
  availablePointContextMenu.value.show = false;

  // 显示编辑名称弹窗
  editAvailablePointModal.value = {
    show: true,
    x: availablePointContextMenu.value.x,
    y: availablePointContextMenu.value.y,
    pointIndex: availablePointContextMenu.value.pointIndex,
    name:
      availablePoints.value[availablePointContextMenu.value.pointIndex].name ||
      "",
  };

  // 延迟设置焦点，确保DOM已经渲染
  setTimeout(() => {
    const inputRef = document.querySelector(".available-point-name-input");
    if (inputRef) {
      inputRef.focus();
    }
  }, 10);
};

// 保存可用点位名称
const saveAvailablePointName = () => {
  if (editAvailablePointModal.value.pointIndex !== -1) {
    availablePoints.value[editAvailablePointModal.value.pointIndex].name =
      editAvailablePointModal.value.name;

    // 更新已放置在画布上且具有相同原始ID的点位名称
    points.value.forEach((point) => {
      if (
        point.originalId ===
        availablePoints.value[editAvailablePointModal.value.pointIndex].id
      ) {
        point.name = editAvailablePointModal.value.name;
      }
    });

    // 如果画布上有更新，重新绘制
    if (points.value.length > 0) {
      drawCanvas();
    }
  }
  // 关闭编辑名称弹窗
  editAvailablePointModal.value.show = false;
};

// 取消编辑可用点位名称
const cancelEditAvailablePointName = () => {
  // 关闭编辑名称弹窗
  editAvailablePointModal.value.show = false;
};

// 处理可用点位右键菜单
const handleAvailablePointContextMenu = (e, index) => {
  // 只有在编辑模式下才允许编辑可用点位名称
  if (!isEditMode.value) {
    return;
  }

  e.preventDefault();

  // 显示右键菜单
  availablePointContextMenu.value = {
    show: true,
    x: e.clientX,
    y: e.clientY,
    pointIndex: index,
  };

  // 阻止事件冒泡
  e.stopPropagation();
};

// 关闭可用点位右键菜单
const closeAvailablePointContextMenu = () => {
  availablePointContextMenu.value.show = false;
};

// 处理点击空白区域关闭所有菜单
const handleOverlayClick = () => {
  closeContextMenu();
  cancelEditName();
  closeAvailablePointContextMenu();
  cancelEditAvailablePointName();
};

// 编辑点位名称
const editPointName = () => {
  // 关闭右键菜单
  contextMenu.value.show = false;

  // 显示编辑名称弹窗
  editNameModal.value = {
    show: true,
    x: contextMenu.value.x,
    y: contextMenu.value.y,
    pointIndex: contextMenu.value.pointIndex,
    name: points.value[contextMenu.value.pointIndex].name || "",
  };

  // 延迟设置焦点，确保DOM已经渲染
  setTimeout(() => {
    const inputRef = document.querySelector(".name-input");
    if (inputRef) {
      inputRef.focus();
    }
  }, 10);
};

// 保存点位名称
const savePointName = () => {
  if (editNameModal.value.pointIndex !== -1) {
    points.value[editNameModal.value.pointIndex].name =
      editNameModal.value.name;
    drawCanvas();
  }
  // 关闭编辑名称弹窗
  editNameModal.value.show = false;
};

// 取消编辑点位名称
const cancelEditName = () => {
  // 关闭编辑名称弹窗
  editNameModal.value.show = false;
};

// 组件挂载时初始化画布
onMounted(() => {
  drawCanvas();
});
</script>

<template>
  <div class="container">
    <!-- 主内容区 - 包含工具栏和画布 -->
    <div class="main-content">
      <!-- 左侧竖向工具栏 -->
      <div class="toolbar">
        <div class="toolbar-title">可用<br />点位</div>
        <div class="point-box">
          <!-- 可拖拽的点位，根据availablePoints数组动态生成 -->
          <div
        v-for="(point, index) in availablePoints"
        :key="point.id"
        class="draggable-point-wrapper"
        @contextmenu="(e) => handleAvailablePointContextMenu(e, index)"
      >
        <!-- 图片类型点位显示图片，普通点位显示彩色方块 -->
        <img
          v-if="point.isImage && point.imagePath"
          class="draggable-image-point"
          draggable="true"
          @dragstart="(e) => handleDragStart(e, point, index)"
          :src="point.imagePath"
          alt="图片点位"
          style="max-width: 100%; max-height: 50px; display: block;"
        />
        <div
          v-else
          class="draggable-point"
          draggable="true"
          @dragstart="(e) => handleDragStart(e, point, index)"
          :style="{ backgroundColor: point.color }"
        ></div>
        <div class="point-name">{{ point.name }}</div>
  
      </div>
        </div>
      </div>
      <!-- 画布和按钮区域 -->
      <div class="canvas-container">
        <h3>校园平面图拖拽楼宇位置</h3>
        <!-- 保存点位、编辑点位和重新渲染按钮 -->
        <div class="button-group">
          <button
            @click="savePoints"
            class="btn save-points-btn"
            :disabled="showEditButton"
          >
            保存点位
          </button>
          <button
            v-if="showEditButton"
            @click="editPoints"
            class="btn edit-points-btn"
          >
            编辑点位
          </button>
          <!-- <button @click="rerenderCanvas" class="btn render-points-btn">
            重新渲染
          </button> -->
          <button @click="clearPoints" class="btn clear-btn">清空点位</button>
        </div>
        <canvas
          id="myCanvas"
          width="963"
          height="666"
          class="canvas"
          @mousedown="handleMouseDown"
          @mousemove="handleMouseMove"
          @mouseup="handleMouseUp"
          @contextmenu="handleContextMenu"
          @mouseleave="handleMouseLeave"
          @dragover="handleDragOver"
          @drop="handleDrop"
        ></canvas>
      </div>
    </div>
    <p class="info" v-if="infoTextType">
      <span v-if="infoTextType === 'addPoint'"
        >添加点位：从左侧拖拽点位到画布，点击并拖动点位可以移动它们，右键点击点位可以打开菜单。</span
      >
      <span v-else-if="infoTextType === 'savedPoints'"
        >点位已保存，不可编辑。点击"编辑点位"按钮可重新编辑。</span
      >
      <span v-else-if="infoTextType === 'renderedPoints'"
        >点位已重新渲染完成。</span
      >
    </p>
    <!-- 右键菜单 -->
    <div
      v-if="contextMenu.show"
      class="context-menu"
      :style="{
        left: contextMenu.x + 'px',
        top: contextMenu.y + 'px',
      }"
    >
      <button @click="editPointName" class="menu-item">编辑名称</button>
      <button @click="deletePoint" class="menu-item">删除点位</button>
    </div>

    <!-- 编辑名称弹窗 -->
    <div
      v-if="editNameModal.show"
      class="edit-name-modal"
      :style="{
        left: editNameModal.x + 'px',
        top: editNameModal.y + 'px',
      }"
    >
      <input v-model="editNameModal.name" type="text" class="name-input" />
      <div class="modal-buttons">
        <button @click="savePointName" class="save-name-btn">保存</button>
        <button @click="cancelEditName" class="cancel-name-btn">取消</button>
      </div>
    </div>

    <!-- 可用点位右键菜单 -->
    <div
      v-if="availablePointContextMenu.show"
      class="context-menu"
      :style="{
        left: availablePointContextMenu.x + 'px',
        top: availablePointContextMenu.y + 'px',
      }"
    >
      <button @click="editAvailablePointName" class="menu-item">
        编辑名称
      </button>
    </div>

    <!-- 可用点位编辑名称弹窗 -->
    <div
      v-if="editAvailablePointModal.show"
      class="edit-name-modal"
      :style="{
        left: editAvailablePointModal.x + 'px',
        top: editAvailablePointModal.y + 'px',
      }"
    >
      <input
        v-model="editAvailablePointModal.name"
        type="text"
        class="available-point-name-input"
      />
      <div class="modal-buttons">
        <button @click="saveAvailablePointName" class="save-name-btn">
          保存
        </button>
        <button @click="cancelEditAvailablePointName" class="cancel-name-btn">
          取消
        </button>
      </div>
    </div>
  </div>

  <!-- 全局点击监听器，用于关闭右键菜单和编辑名称弹窗 -->
  <div
    v-if="
      contextMenu.show ||
      editNameModal.show ||
      availablePointContextMenu.show ||
      editAvailablePointModal.show
    "
    class="menu-overlay"
    @mousedown="handleOverlayClick"
  ></div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

h3 {
  color: #333;
  margin-bottom: 10px;
}
.point-box {
  height: 300px;
  overflow-y: auto;
}
.clear-btn {
  width: 80px;
  background-color: #f44336;
  color: white;
  border: none;
  padding: 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
  margin-bottom: 10px;
  outline: none;
}

.clear-btn:hover {
  background-color: #d32f2f;
}

.main-content {
  display: flex;
  align-items: center;
  gap: 20px;
}
.toolbar {
  width: 80px; /* 增加宽度以适应更美观的布局 */
  padding: 10px 0;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 增加间距 */
  min-height: 200px;
  box-sizing: border-box;
  transition: box-shadow 0.3s ease;
}

.toolbar:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.toolbar-title {
  font-size: 16px;
  font-weight: 600;
  color: #444;
  text-align: center;
  padding: 8px 0;
  margin-bottom: 5px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
}

.draggable-point-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.draggable-point-wrapper:hover {
  background-color: rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.draggable-point {
  width: 30px;
  height: 30px;
  cursor: grab;
  border: 2px solid #333;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* 图片点位样式 */
.draggable-image-point {
  width: 30px;
  height: 30px;
  cursor: grab;
  border: 2px solid #333;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  object-fit: cover;
}

.draggable-image-point:hover {
  transform: scale(1.15);
  cursor: grabbing;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.draggable-image-point:active {
  transform: scale(1.05);
}

.draggable-point::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.draggable-point:hover {
  transform: scale(1.15);
  cursor: grabbing;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.draggable-point:active {
  transform: scale(1.05);
}

.point-name {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  text-align: center;
  word-break: break-all;
  max-width: 90px;
  padding: 4px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.draggable-point-wrapper:hover .point-name {
  color: #667eea;
  background-color: rgba(102, 126, 234, 0.1);
}

.canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.canvas {
  border: 2px solid #dee2e6;
  background-color: #fff;
  background-image: url("src/assets/mpbg.jpg");
  background-position: center;
  background-size: 150% 150%;
  background-repeat: no-repeat;
  cursor: default;
}

.info {
  margin-top: 20px;
  color: #666;
  font-size: 14px;
}

.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
  z-index: 1000;
  min-width: 120px;
}

.menu-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #f0f0f0;
}

.edit-name-modal {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 10px;
  z-index: 1000;
}

.name-input,
.available-point-name-input {
  width: 200px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 8px;
}

.modal-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.save-name-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-name-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

/* 保存点位和编辑点位按钮组样式 */
.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

/* 统一按钮基础样式 */
  .btn {
    border: none;
    padding: 10px 10px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 0 4px;
    min-width: 90px;
    text-align: center;
  }

  .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
  }

  /* 各按钮特定样式 */
  .save-points-btn {
    background-color: #4caf50;
    color: white;
  }

  .save-points-btn:hover:not(:disabled) {
    background-color: #45a049;
  }

  .save-points-btn:disabled {
    background-color: #cccccc;
  }

  .render-points-btn {
    background-color: #2196f3;
    color: white;
  }

  .render-points-btn:hover {
    background-color: #1976d2;
  }

  .edit-points-btn {
    background-color: #2196f3;
    color: white;
  }

  .edit-points-btn:hover {
    background-color: #1976d2;
  }

  .clear-btn {
    background-color: #f44336;
    color: white;
  }

  .clear-btn:hover:not(:disabled) {
    background-color: #da190b;
  }

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
</style>








